<template>
  <div>
    <div>
      <el-form :inline="true">
        <el-form-item prop="" label="">
          <GradeSelect v-model="searchForm.grade" />
        </el-form-item>
        <el-form-item>
          <ClassSelect v-model="searchForm.class" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.status" clearable placeholder="请选择综合测试完成状态">
            <el-option :value="1" label="未完成" />
            <el-option :value="2" label="已完成" />
          </el-select>
        </el-form-item>
        <el-form-item prop="" label="">
          <el-input v-model="searchForm.search" placeholder="按学生姓名搜索" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">筛选</el-button>
          <el-button v-if="allow" type="primary" @click="handleExport">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table v-loading="table.loading" :data="table.data" border>
        <el-table-column prop="id" label="学生ID" />
        <el-table-column prop="name" label="姓名/昵称" />
        <el-table-column prop="grade.grade_name" label="年级" />
        <el-table-column prop="class_name" label="班级" />
        <el-table-column prop="interest" label="职业兴趣测试" align="center">
          <template slot-scope="t">
            <i v-if="t.row.interest" class="el-icon-success" style="color: rgba(25,137,250,1)" />
            <i v-else class="el-icon-error" style="color: #C0C4CC" />
          </template>
        </el-table-column>
        <el-table-column prop="intelligence" label="多元智能测试" align="center">
          <template slot-scope="t">
            <i v-if="t.row.intelligence" class="el-icon-success" style="color: rgba(25,137,250,1)" />
            <i v-else class="el-icon-error" style="color: #C0C4CC" />
          </template>
        </el-table-column>
        <el-table-column prop="worth" label="职业价值观测试" align="center">
          <template slot-scope="t">
            <i v-if="t.row.worth" class="el-icon-success" style="color: rgba(25,137,250,1)" />
            <i v-else class="el-icon-error" style="color: #C0C4CC" />
          </template>
        </el-table-column>
        <el-table-column prop="character" label="性格测试" align="center">
          <template slot-scope="t">
            <i v-if="t.row.character" class="el-icon-success" style="color: rgba(25,137,250,1)" />
            <i v-else class="el-icon-error" style="color: #C0C4CC" />
          </template>
        </el-table-column>
        <el-table-column prop="grown" label="成长环境测试" align="center">
          <template slot-scope="t">
            <i v-if="t.row.grown" class="el-icon-success" style="color: rgba(25,137,250,1)" />
            <i v-else class="el-icon-error" style="color: #C0C4CC" />
          </template>
        </el-table-column>
        <el-table-column prop="generate" label="综合测试完成状态测试" align="center">
          <template slot-scope="t">
            <i v-if="t.row.status === 2" class="el-icon-success" style="color: rgba(25,137,250,1)" />
            <i v-else class="el-icon-error" style="color: #C0C4CC" />
          </template>
        </el-table-column>
        <el-table-column label="测试时间" align="center">
          <template slot-scope="s">
            <span>{{ s.row.created_at }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <WrapPagination>
      <div>
        <el-pagination
          class="pagination"
          :current-page="table.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="table.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </WrapPagination>
  </div>
</template>

<script>
import { TableMixin } from '../../components/mixin'
import GradeSelect from '../statistics/components/grade-select'
import ClassSelect from '../statistics/components/class-select'
import { exportWord, getCompositeDetails } from '../../api/pc-statistics'
export default {
  name: 'CareerComplex',
  components: {
    GradeSelect: GradeSelect,
    ClassSelect: ClassSelect
  },
  mixins: [TableMixin],
  data() {
    return {
      searchForm: {
        grade: '',
        search: '',
        status: '',
        class: ''
      }
    }
  },
  computed: {
    allow() {
      console.log(this.$store.state.user)
      return this.$store.state.user.roles.includes('高中-导出PC生涯测评报告')
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    handleExport() {
      this.$prompt('请输入邮箱', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        inputErrorMessage: '邮箱格式不正确'
      }).then(({ value }) => {
        exportWord({
          email: value
        }).then(res => {
          this.$message.success('正在努力为您生成生涯测评报告，请稍后查收您的邮箱')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    },
    handleSearch() {
      this.table.page = 1
      this.getList()
    },
    getList() {
      return this.wrapList(getCompositeDetails, {
        generate: this.searchForm.status,
        search: this.searchForm.search,
        grade_id: this.searchForm.grade,
        class_name: this.searchForm.class
      })
    }
  }
}
</script>

<style scoped>

</style>
